<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div>
    <div class="Mall4j con-box page-uc-coupons">
      <div class="uc-nav">
        <div class="nav-box">
          <div :class="['nav-item', status === 1 ? 'active' : '']">
            <span
              class="text"
              @click="getCouponList(1)"
            >
              {{ $t('coupons.notUsed') }}
              <em class="number">{{ unUseCount }}</em>
            </span>
            <i class="line" />
          </div>
          <div :class="['nav-item', status === 2 ? 'active' : '']">
            <span
              class="text"
              @click="getCouponList(2)"
            >
              {{ $t('coupons.alreadyUse') }}
              <em class="number">{{ useCount }}</em>
            </span>
            <i class="line" />
          </div>
          <div :class="['nav-item', status === 0 ? 'active' : '']">
            <span
              class="text"
              @click="getCouponList(0)"
            >
              {{ $t('coupons.expired') }}
              <em class="number">{{ expiredCount }}</em>
            </span>
            <i class="line" />
          </div>
        </div>
      </div>
      <div
        v-if="visible"
        class="popup-mask"
      />
      <div class="coupons-list">
        <div
          v-for="item in dataList"
          :key="item.couponUserId"
          :class="$t('language') === 'zh_CN' ? ['item', status === 2 ? 'item coupon-used' : status === 0 ? 'item coupon-over' : 'item'
          ] : ['item', status === 2 ? 'item coupon-used-en' : status === 0 ? 'item coupon-over-en' : 'item'
          ]"
        >
          <a
            href="JavaScript:"
            class="coupon-close"
            @click="deletePop(item)"
          />
          <div class="coupon-type">
            <div class="coupon-price">
              <div class="price">
                <div
                  v-if="item.couponType === 1"
                  class="small"
                >
                  ￥
                </div>
                <span
                  v-if="item.couponType === 1"
                  class="big"
                >{{
                  item.reduceAmount
                }}</span>
                <div
                  v-if="item.couponType === 2"
                  class="big"
                >
                  {{ item.couponDiscount }}&nbsp;
                </div>
                <span
                  v-if="item.couponType === 2"
                  class="small"
                > {{ $t('fold') }}</span>
              </div>
              <span class="limit">{{ $t('coupons.availableOver').replace('x', item.cashCondition) }}</span>
            </div>
            <div class="coupon-time">
              {{ $t('coupons.validUntil') }}：{{ item.startTime + ' - ' + item.endTime }}
            </div>
          </div>
          <div class="coupon-info">
            <div class="range">
              <div class="range-item">
                <span
                  class="label"
                  :style="{maxWidth:$t('language')!=='zh_CN' ? '68px' : ''}"
                >{{ $t('coupons.limitedFcategory') }}：</span>
                <div
                  v-if="item.shopId === 0 && item.suitableProdType === 0"
                  class="range"
                >
                  {{ $t('coupons.canUsedToPurchaseTheFullRangeOfProductsOnThePlatform') }}
                </div>
                <div
                  v-if="item.shopId !== 0 && item.suitableProdType === 0"
                  class="range"
                >
                  {{ '[' + item.shopName + ']' }}
                  {{ $t('coupons.canUsedToPurchaseFullRangeOfProductsFromSelectedStores') }}
                </div>
                <div
                  v-if="
                    item.suitableProdType === 1 || item.suitableProdType === 2
                  "
                  class="range"
                >
                  {{ $t('coupons.canBeUsedToPurchaseSelectedItems') }}
                </div>
              </div>
              <div class="range-item">
                <span
                  class="label"
                  :style="{maxWidth:$t('language')!=='zh_CN' ? '68px' : ''}"
                >{{ $t('coupons.limitedPlatform') }}：</span>
                <!-- suitableProdType 适用商品类型 0全部商品参与 1指定商品参与 2指定商品不参与， shopId === 0平台券， shopId != 0店铺券 -->
                <div
                  v-if="item.shopId === 0"
                  :style="{marginLeft:$t('language')!=='zh_CN'?'10px':''}"
                >
                  <div
                    v-if="item.suitableProdType === 0"
                    class="range"
                  >
                    {{ $t('coupons.universalAcrossAllPlatforms') }}
                  </div>
                  <div
                    v-if="
                      item.suitableProdType === 1 || item.suitableProdType === 2
                    "
                    class="range"
                  >
                    {{ $t('coupons.availableForSelectedProductsAcrossAllPlatforms') }}
                  </div>
                </div>
                <div v-if="item.shopId !== 0">
                  <div
                    v-if="item.suitableProdType === 0"
                    class="range"
                  >
                    {{ '[' + item.shopName + ']' }} {{ $t('coupons.availableForAllProductsInDesignatedStores') }}
                  </div>
                  <div
                    v-if="
                      item.suitableProdType === 1 || item.suitableProdType === 2
                    "
                    class="range"
                  >
                    {{ '[' + item.shopName + ']' }} {{ $t('coupons.someItemsAvailableInSelectedStores') }}
                  </div>
                </div>
              </div>
            </div>
            <a
              href="JavaScript:"
              class="coupon-btn"
              @click="userCoupon(item)"
            >{{ $t('coupons.useNow') }}</a>
          </div>
        </div>
        <div
          v-if="visible"
          class="popup-box"
        >
          <div class="tit">
            <div class="text">
              {{ $t('tips') }}
            </div>
            <div
              class="close"
              @click="cancelDel()"
            />
          </div>
          <div class="con">
            <div
              v-if="status === 1"
              class="tip"
            >
              <div class="tip-icon warning" />
              <div class="tip-info">
                <div class="result">
                  {{ $t('coupons.sureDeleteTheCoupon') }}
                </div>
                <div class="date">
                  {{ $t('coupons.deletedCouponsWillNotBeRestored') }}
                </div>
                <div class="btns">
                  <a
                    href="JavaScript:"
                    class="btn-r"
                    @click="deleteCoupon()"
                  >{{ $t('delete') }}</a>
                  <a
                    href="JavaScript:"
                    class="btn-g"
                    @click="cancelDel()"
                  >{{ $t('cancel') }}</a>
                </div>
              </div>
            </div>
            <div
              v-else
              class="tip"
            >
              <div class="tip-icon warning" />
              <div class="tip-info">
                <div
                  class="result"
                  style="line-height: 30px;margin-bottom: 30px;"
                >
                  {{ $t('coupons.sureDeleteTheCoupon') }}
                </div>
                <div
                  class="btns"
                  style="margin-left: -30px;"
                >
                  <a
                    href="JavaScript:"
                    class="btn-r"
                    @click="deleteCoupon()"
                  >{{ $t('delete') }}</a>
                  <a
                    href="JavaScript:"
                    class="btn-g"
                    @click="cancelDel()"
                  >{{ $t('cancel') }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /弹窗 -->
      </div>
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @change-page="getCouponPage()"
      />
      <!-- 页码 -->
      <!-- 空列表提示 -->
      <empty-all-tips
        v-if="isEmpty"
        :text="$t('coupons.noRelatedCoupons')"
        :back="$t('lookAtOther')"
        back-path="/coupons"
        :src-type="3"
      />
      <!-- /空列表提示 -->
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const visible = ref(false)
onMounted(() => {
  document.title = $t('coupons.myCoupons')
  visible.value = false
  getCouponList(1)
  getCouponCount()
})

const isEmpty = ref(false)
const status = ref(1)
const current = ref(route.query.current || 1) // 当前页数
const dataList = ref([])
const pages = ref(0) // 总页数
/**
 * 获取券列表
 */
const getCouponList = (statusPar) => {
  isEmpty.value = false
  if (status.value !== statusPar) {
    status.value = statusPar
    current.value = 1
  }
  http.get('/p/myCoupon/getCouponList', {
    params: {
      status: status.value,
      current: current.value,
      size: 12
    }
  }).then(({ data }) => {
    dataList.value = data.records
    isEmpty.value = !dataList.value.length
    pages.value = data.pages
    if (!dataList.value.length && current.value >= 1) {
      current.value = current.value - 1
      http.get('/p/myCoupon/getCouponList', {
        params: {
          status: status.value,
          current: current.value,
          size: 12
        }
      }).then(({ data }) => {
        dataList.value = data.records
        isEmpty.value = !dataList.value.length
        pages.value = data.pages
      })
    }
  })
}

const expiredCount = ref(0)
const useCount = ref(0)
const unUseCount = ref(0)
/**
 * 获取各分类数量
 */
const getCouponCount = () => {
  http.get('/p/myCoupon/getMyCouponsStatusCount').then(({ data }) => {
    expiredCount.value = data.expiredCount
    unUseCount.value = data.unUseCount
    useCount.value = data.useCount
  })
}

let delCoupon = null
/**
 * 删除弹窗
 */
const deletePop = (item) => {
  visible.value = true
  delCoupon = item
}

/**
 * 取消删除
 */
const cancelDel = () => {
  visible.value = false
}

/**
 * 优惠券使用跳转商品列表
 */
const userCoupon = (item) => {
  if (item.shopId === 0) {
    // 平台券 跳转到商品列表页
    router.push({
      path: '/list',
      query: {
        st: 4,
        couponId: item.couponId
      }
    })
  } else if (item.shopId !== 0 && (item.suitableProdType === 1 || item.suitableProdType === 2)) {
    // 店铺券 指定商品可用  对应店铺商品列表
    router.push({
      path: '/shop-index',
      query: {
        st: 4,
        sid: item.shopId,
        couponId: item.couponId
      }
    })
  } else if (item.shopId !== 0 && item.suitableProdType === 0) {
    // 店铺券 店铺内所有商品可用 跳转店铺页面
    router.push({
      path: '/shop-index',
      query: {
        sid: item.shopId
      }
    })
  }
}

/**
 * 删除优惠券
 */
const deleteCoupon = () => {
  http.delete('/p/myCoupon/delCoupon/' + delCoupon.couponUserId, {}).then(({ data }) => {
    if (data) {
      visible.value = false
      ElMessage({
        message: data,
        type: 'success',
        duration: 1000,
        onClose: () => {
          getCouponList(status.value)
          getCouponCount()
        }
      })
    }
  })
}
/**
 * 请求券列表
 */
const getCouponPage = () => {
  getCouponList(status.value)
}

</script>

<style lang="scss" scoped>
@use "index";
</style>

<style lang="scss" scoped>
@use "../common/scss/user-center";
</style>
